<template>
	<view>
		<u-navbar :is-back="true" :background="{backgroundColor: '#F9D854',}" title="搜索" title-width="325"
			title-color="#ffffff" title-size="35" backIconColor="#ffffff" :border-bottom="false"></u-navbar>
		<search  :is-focus="true" :theme="themeClass" :show-want="true" :speechEngine="speechEngine" :hot-list="hotList"
			@getSearchText="getSearchText" @searchTextChange="searchTextChange"></search>

		<view v-show="dbName == 'emjio-list'" class="seachResultbgView" :style="{'top':navigationHeight+'px'}">
			<view class="itemListBgView" v-for="(item,index) in list" :key="index" @click="navigateToDetail(item)">
				<view class="doutuTitleBgView">
					<view v-if="index < 3"
						style="align-items: center;display: flex;background: linear-gradient(to right,#FDEFB7,#ffffff);padding: 1px 27px 1px 0;">
						<image style="width: 30px;height: 15px;" src="/static/detail/detail_album_vip.png" mode="">
						</image>
						<view
							style="font-size: 26rpx;color: black;font-weight: 400;flex-wrap: nowrap;margin-left: 3px;">
							{{item.title}}
						</view>
					</view>
					<view v-else style="align-items: center;display: flex;">
						<view style="font-size: 30rpx;color: black;font-weight: 500;">
							{{item.title}}
						</view>
					</view>
					<view style="font-size: 24rpx;color: #A4A4A4;">
						更多
						<u-icon name="arrow-right" size="24"></u-icon>
					</view>
				</view>
				<view class="doutuBgView">
					<view  v-for="(item, index) in item.imgs" :key="index">
						<image class="iconView" :src="item" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<u-loadmore v-show="list.length > 0" :status="loadStatus" :font-size="24" :margin-top="30" :margin-bottom="20" color="#B8B8B8" />
		</view>
	</view>
</template>

<script>
	import API from '../../api/api.js';
	import search from '@/components/search/search.vue'
	export default {
		components: {
			search
		},
		data() {
			return {
				themeClass: 'block',
				speechEngine: 'baidu', //语音识别引擎
				hotList: ['斗图','怼人', '撒娇', '情侣日常', '女生专用'], //初始化推荐列表
				isSearch: false,
				dbName: null,
				searchKey: null,
				loadShow: false,
				searchWord: null,
				image_height: 400,
				image_widht: 220,
				navigationHeight:64,
				pageIndex: 1,
				pageSize: 10,
				list: []
			}
		},
		onShareTimeline() {
			var share = {
				share_title: "节日头像",
				share_desc: "节日头像",
				share_img: ""
			}
			if (this.appconfig.shareInfo.status == 1) {
				share = this.appconfig.shareInfo
			}
			return {
				title: share.share_title,
				imageUrl: share.share_img,
				desc: share.share_desc,
			}
		},
		onShareAppMessage() {
			var share = {
				share_title: "节日头像",
				share_desc: "节日头像",
				share_img: ""
			}
			if (this.appconfig.shareInfo.status == 1) {
				share = this.appconfig.shareInfo
			}
			return {
				title: share.share_title,
				imageUrl: share.share_img,
				desc: share.share_desc,
			}
		},
		onLoad: function(options) {
			this.dbName = "emjio-list"
			this.searchKey = "tag"

			var systemInfo = uni.getSystemInfoSync();
			this.navigationHeight = systemInfo.statusBarHeight+44+70
			this.image_widht = (systemInfo.screenWidth - 10 - 10 - 10 - 10) / 3
			this.image_height = this.image_widht * 400 / 220
		},
		onReachBottom() {
			let that = this;
			if (that.loadStatus == 'nomore') return
			that.pageIndex += 1;
			that.search()
		},
		methods: {

			search() {
				if (this.searchWord != null) {
					let that = this;
					API.search(this.pageIndex, this.pageSize, this.searchWord, this.searchKey, this.dbName).then(res => {
							if (this.dbName == 'emjio-list') {
								for (var i in res) {
									var tmp = res[i]
									tmp['imgs'] = JSON.parse(tmp['imgs'])
									if (tmp['imgs'].length > 4) {
										tmp['imgs'] = tmp['imgs'].slice(0, 4)
									}
								}
							}
							if (that.pageIndex == 1) {
								that.list = res;
								that.loadStatus = 'loadmore'
							} else {
								that.list = that.list.concat(res);
							}

							if (res.length == that.pageSize) {
								that.loadStatus = 'loadmore'
							} else {
								that.loadStatus = 'nomore'
							}
						})
						.catch(err => {
							console.log(err)
							this.pageIndex = 1
						})
				}
			},
			navigateToDetail(res) {
				uni.navigateTo({
					url: '../../pagesOther/emjioDetail/emjioDetail?item=' + encodeURIComponent(JSON.stringify(
						res))
				})
			},
			searchTextChange(e){
				if(e == ""){
					this.list = []
					return
				}
			},
			getSearchText(e) {
				console.log(e)
				
				if (this.isSearch) {
					uni.showToast({
						icon: 'none',
						title: '太快啦，歇一会再试试',
						mask: true,
						duration: 1000
					})
					return
				}
				this.isSearch = true
				this.searchWord = e
				this.pageIndex = 1
				this.search()
				this.isSearch = false
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f5f5f5;
	}

	.search {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 20rpx;
	}

	.search-wrapper {
		border: 2rpx solid rgba(255, 199, 0, 0.5);
		margin-left: 20rpx;
		margin-right: 10rpx;
		width: 580rpx;
		background: #fff;
		border-radius: 10rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.search-wrapper input {
		font-size: 30rpx;
	}

	.input-placeholder {
		font-size: 30rpx;
	}

	.search-wrapper image {
		width: 36rpx;
		height: 36rpx;
		margin-left: 20rpx;
	}

	.search-wrapper input {
		margin-left: 20rpx;
		height: 100%;
		width: 480rpx;
	}

	.search-btn {
		background: #ffdf00;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		width: 120rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	.listBgView {
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
		justify-content: space-between;

		.tab {
			position: relative;
			border-radius: 16rpx;
			margin-top: 5px;

			image {
				border-radius: 16rpx
			}

			.array {
				position: absolute;
				top: 18rpx;
				right: 0rpx;
				color: #FFFFFF;
				background-color: rgba(0, 0, 0, 0.4);
				padding: 0rpx 12rpx 0 16rpx;
				border-radius: 20rpx 0 0 20rpx;
				font-size: 14px
			}
		}

		.array .item_text {
			font-size: 12px;
			font-weight: 200;
			margin-top: 10rpx;
		}

		.tagb {
			background: #fff;
			width: 100%;
			margin-top: 20px
		}

		.tagss {
			font-size: 14px;
			color: #909399;
			line-height: 40rpx;
			padding: 0 20rpx;
			margin-right: 10rpx;
			white-space: nowrap
		}

		.tag-actives {
			color: #333333;
			animation: tiaobig 0.8s ease-in-out alternate infinite;
			animation-iteration-count: 1;
			font-weight: 600
		}

		.tags {
			font-size: 14px;
			color: #909399;
			border-radius: 40rpx;
			line-height: 50rpx;
			height: 50rpx;
			text-align: center;
			margin-right: 20rpx;
			padding: 0 20rpx 0rpx 0rpx;
			white-space: nowrap
		}

		.tags:after {
			content: '';
			width: auto;
			min-width: 20px;
			height: 4px;

			border-radius: 10px;
			display: block;
			margin-top: 1px;
		}

		.tag-active:after {
			content: '';
			width: auto;
			min-width: 20px;
			height: 4px;
			background: #ffdf00;
			border-radius: 10px;
			display: block;
			margin-top: 1px;
		}

	}

	.aui-palace-grid-icon {
		width: 50px;
		height: 50px;
		margin: 0 auto;
	}

	.aui-palace-grid-icon img {
		display: block;
		width: 100%;
		height: 100%;
		border: none;
		border-radius: 14px;
	}

	.aui-palace-grid-text {
		display: block;
		text-align: center;
		color: #333;
		font-size: 12px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		margin-top: 5px;
	}

	.aui-palace-grid-text h2 {
		font-size: 12px;
		font-weight: normal;
		color: #464646;
	}


	@-webkit-keyframes animloader61 {
		0% {
			height: 48px;
		}

		100% {
			height: 4.8px;
		}
	}

	@keyframes animloader61 {
		0% {
			height: 48px;
		}

		100% {
			height: 4.8px;
		}
	}

	@-webkit-keyframes animloader61m {
		0% {
			height: 40px;
			transform: translateY(0);
		}

		100% {
			height: 10px;
			transform: translateY(30px);
		}
	}

	@keyframes animloader61m {
		0% {
			height: 40px;
			transform: translateY(0);
		}

		100% {
			height: 10px;
			transform: translateY(30px);
		}
	}

	.loader-61 {
		width: 8px;
		height: 40px;
		border-radius: 4px;
		display: inline-block;
		position: relative;
		background: currentColor;
		color: #ffdf00;
		-webkit-animation: animloader61 0.3s 0.3s linear infinite alternate;
		animation: animloader61 0.3s 0.3s linear infinite alternate;
	}

	.loader-61::after,
	.loader-61::before {
		content: "";
		width: 8px;
		height: 40px;
		border-radius: 4px;
		background: currentColor;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 20px;
		-webkit-animation: animloader61 0.3s 0.45s linear infinite alternate;
		animation: animloader61 0.3s 0.45s linear infinite alternate;
	}

	.loader-61::before {
		left: -20px;
		-webkit-animation-delay: 0s;
		animation-delay: 0s;
	}
	.seachResultbgView {
		position: absolute;
		top: 0;
		left: 0;
		background-color: white;
	}

	.content {
		height: 100%;
	}

	.item {
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}

	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}

	.doutuBgView {
		margin: 8px 0 8px 8px;
		display: flex;
		flex-direction: row;
	}

	.iconView {
		width: calc((100vw - 5*8px)/4);
		height: calc((100vw - 5*8px)/4);
		margin-right: 8px;
		border-radius: 8px;
		background-color: #FDEFB766;
	}

	.doutuTitleBgView {
		padding: 0 12px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.itemListBgView {
		padding-top: 20rpx;

	}
</style>